<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            list-style-type: none;
            margin: 0;
            padding: 0;
            width: 280px;
            border: solid 1px #ccc;
        }
        ul>li:nth-child(1){
            font-weight: 700;
            background-color: #eee;
            width: 260px;
            padding: 5px 10px;
        }
        ul>:not(li:nth-child(1)){
            border-bottom: dashed 1px #ccc;
            padding: 5px 10px;
        }
        ul>li>span{
            display: inline-block;
            width: 90px;
        }
        #add{
            padding: 5px 10px;
        }
        #add>div>span{
            display: inline-block;
            width: 60px;
            text-align: right;
        }
        #add>div{
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div id="stu">
        <ul id="ul">
        
        </ul>
        <div id="add">
            <div>
                <span>姓名：</span>
                <input type="text" id="name">
            </div>
            <div>
                <span>年龄：</span>
                <input type="text" id="age">
            </div>
            <div>
                <span></span>
                <button id="btnA">增加</button>
                <button id="btnD">删除</button>
            </div>
        </div>
    </div>

    <script>
        //定义一个数组
        var stu = [{name:'张三',age:20}, 
                   {name:'李四',age:30}];

        function loadStu(){
            //定义一个保存全部字符内容的变量
            var HTML="<li><span>姓名</span><span>年龄</span></li>"
            //读取数组元素,使用遍历的方式
            for(var i=0;i<stu.length;i++){
                HTML+='<li>';
                HTML+='<span>'+stu[i].name+'</span>'
                HTML+='<span>'+stu[i].age+'</span>'
                HTML+='</li>'
            }
            document.getElementById("ul").innerHTML=HTML;
        }

        //首次执行
        loadStu();
        document.getElementById("btnA").onclick = function(){
            var _name=document.getElementById("name").value;
            var _age=document.getElementById("age").value;
            //声明一个对象
            var _obj={};
            //设置对象的值
            _obj.name=_name;
            _obj.age=_age;
            //将对象增加到数组5中
            stu.push(_obj);
            //更新页面数据
            loadStu();
        }
        //删除列表末尾一行
        document.getElementById("btnD").onclick = function(){
            stu.pop();
            loadStu();
        }

    </script>
</body>
</html>